<template>
  <div class="box">
    <div class="boxItem" v-for="(item, index) in commentData" :key="index">
      <div class="itemTitle">{{ item.title }}</div>
      <div class="video">
        <video controls :src="item.videoUrl"></video>
      </div>
      <div class="tempContent">
        <div class="contentText">
          {{ item.content }}
        </div>
        <!-- <div class="contentAction">展开全部</div> -->
      </div>
      <div class="extraInfo">
        <div class="itemTime">{{ item.createTime }}</div>
        <div class="itemAction">
          <div class="itemActionChild" @click="handleCollect(index, item.id)">
            <img :src="isCollectFn(item.isCollect)" alt="" />
            <span>{{ item.collectNum }}</span>
          </div>
          <div class="itemActionChild">
            <img src="@/assets/active/pic5.png" alt="" />
            <span>{{ item.shareNum }}</span>
          </div>
          <div class="itemActionChild">
            <img src="@/assets/active/pic6.png" alt="" />
            <span>{{ item.commentsNum }}</span>
          </div>
          <div class="itemActionChild" @click="handleLike(index, item.id)">
            <img src="@/assets/active/pic4.png" alt="" />
            <span>{{ item.likeNum }}</span>
          </div>
        </div>
      </div>
      <div class="publishCommit" v-show="!item.inputIng">
        <Button type="error"  @click="handlePublishComment(item)"> 发表评论 </Button>
      </div>
      <div class="replyInputBox" v-show="item.inputIng">
        <Input
          class="replyInput"
          v-model="publishCommentVal"
          type="textarea"
          :autosize="{ minRows: 4 }"
          placeholder="评论"
        />
        <div class="replyInputBtn">
          <Button size="small" class="btn"  @click="handleCancePublishComment(item)">取消</Button>
        <Button type="error"  class="btn" size="small" @click="handleSubmitPublishComment(item,index)">提交</Button>
        </div>
      </div>
      <div class="dividing" v-if="commentData.length !== total"></div>

      <!-- 评论列表 -->
      <Reply :dynamicId="item.id" ref='Reply' :index="index"/>
    </div>
    <div
      :style="{
        color: commentData.length < total ? '#2F7DE7' : '#dedede',
      }"
      class="showMore"
      @click="handleGetMoreComment"
    >
      {{ showMsg }}
    </div>
  </div>
</template>

<script>
import {
  getExpertDynamic,
  setExpertDynamicLike,
  setExpertDynamicCollect,
  getExpertDynamicInfo,
  addExpertDynamicComment
} from "@/api/experts.js";
import Reply from "./reply.vue";
export default {
  props: {},
  components: { Reply },
  data() {
    return {
      params: {
        pageNumber: 1,
        pageSize: 10,
      },
      publishCommentVal: '',
      total: 0,
      commentData: [],
      showMsg: "查看更多评论",
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    isCollectFn(e) {
      let edIcon = require("@/assets/active/pic7ed.png");
      let Icon = require("@/assets/active/pic7.png");
      if (e) {
        return edIcon;
      } else {
      return  Icon;
      }
    },
    // 点击发表评论按钮
    handlePublishComment(item) {
      this.publishCommentVal = ''
      // 先关闭所有的
      this.commentData.forEach(it=> it.inputIng = false)
      // 再打开当前动态的评论框
      item.inputIng = true
    },
    // 确认提交评论
    handleSubmitPublishComment(item,index) {
      addExpertDynamicComment({
        dynamicId:item.id,
        details: this.publishCommentVal,
        commentType: 0,
      }).then(res => {
        if(res.code === 200) {
          this.publishCommentVal = ''
          item.inputIng = false
          this.$refs.Reply[index].commentArr.unshift(res.result)
        }
      })
    },
    // 取消提交
    handleCancePublishComment(item) {
      item.inputIng = false
      this.publishCommentVal = ''
    },
    // 点赞
    handleLike(index, dynamicId) {
      setExpertDynamicLike(dynamicId).then((res) => {
        if (res.code === 200) {
          this.getInfo(index, dynamicId);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 收藏
    handleCollect(index, dynamicId) {
      setExpertDynamicCollect(dynamicId).then((res) => {
        if (res.code === 200) {
          // this.getInfo(index, dynamicId);
          // this.commentData[index].isCollect=this.commentData[index].isCollect?false:true
          if( this.commentData[index].isCollect){
            this.commentData[index].isCollect=false
            this.commentData[index].collectNum--
          }else{
            this.commentData[index].isCollect=true
            this.commentData[index].collectNum++
          }
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //  分享 没做
    handleShare(index, dynamicId) {},
    // 获取动态详情信息
    getInfo(index, dynamicId) {
      getExpertDynamicInfo(dynamicId).then((res) => {
        if (res.code === 200) {
          this.$set(this.commentData, index, {...res.result,inputIng: this.commentData[index].inputIng});
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 更多评论
    handleGetMoreComment() {
      if (this.commentData.length < this.total) {
        this.params.pageNumber++;
        this.getData();
      }
    },
    // 获取数据
    getData(val) {
      const params = val || this.params;
      this.showMsg = "加载中...";
      getExpertDynamic({
        createBy: this.$route.query.id,
        ...params,
      }).then((res) => {
        if (res.code === 200) {
          this.commentData = [...this.commentData, ...res.result.records].map(
            (it) => {
              // 是否显示输入框
              it.inputIng = false;
              return it;
            }
          );
          this.total = parseInt(res.result.total);
          if (this.commentData.length < this.total) {
            this.showMsg = "查看更多评论";
          } else {
            this.showMsg = "没有更多了...";
          }
          if(this.total === 0) {
              this.showMsg = "";
            }
        }
      }).catch(()=> {
        this.showMsg = "加载失败，请刷新页面重新加载";
      })
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  .boxItem {
    width: 70%;
    margin: 0 auto;
    margin-bottom: 36px;

    .replyInputBox {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .replyInput {
        margin-bottom: 10px;
      }
      .replyInputBtn {
        display: flex;
        .btn {
          margin-left: 10px;
        }
      }
    }

    .itemTitle {
      color: #131313;
      font-size: 20px;
      margin-bottom: 15px;
    }

    .video {
      width: 100%;

      video {
        width: 100%;
        max-height: 500px;
      }
    }

    .tempContent {
      font-size: 14px;
      margin: 10px 0;
      display: flex;

      .contentText {
        color: #131313;
        width: 100%;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        // overflow: hidden;
      }

      .contentAction {
        color: red;
        width: 67px;
      }
    }

    .extraInfo {
      display: flex;
      justify-content: space-between;

      .itemAction {
        display: flex;
        align-items: center;

        .itemActionChild {
          // display: flex;
          // align-items: center;
          margin-left: 18px;
          font-size: 14px;
          cursor: pointer;

          img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
        }
      }
    }

    .publishCommit {
      text-align: right;
      margin-top: 20px;
    }

    .dividing {
      height: 1px;
      width: 100%;
      background-color: #ebebeb;
      margin: 20px 0;
    }

    .commentList {
      .commentItem {
        width: 100%;

        .content {
          margin-top: 16px;
          font-size: 14px;
          color: #333333;
          margin-left: 62px;
          margin-bottom: 19px;

          .byReplied {
            color: #878583;
            margin-left: 6px;
          }
        }

        .info {
          display: flex;
          align-items: center;

          .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 12px;
          }

          .textInfo {
            flex: 1;

            .createTime {
              color: #acacac;
              font-size: 12px;
            }

            .infoTop {
              display: flex;
              justify-content: space-between;

              .nickName {
                color: #333333;
                font-size: 14px;
              }

              .commentAction {
                display: flex;
                align-items: center;

                .itemActionChild {
                  // display: flex;
                  // align-items: center;
                  cursor: pointer;
                  margin-left: 18px;
                  font-size: 14px;

                  img {
                    width: 14px;
                    height: 14px;
                    margin-right: 5px;
                  }
                }
              }
            }
          }
        }


      }
    }
  }

  .showMore {
    color: #2f7de7;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
  }
}
</style>
